<template>
	<a-watermark class="watermark" content="趣貓坞" grayscale>
		<view class="login-page">
			<a-typography-title :heading="2">
				登陆趣喵呜
			</a-typography-title>
			<a-form size="large" style="margin-top: 50px;"  scroll-to-first-error :rules="Rules" layout="vertical" :model="Form" @submit="Login">
				<a-form-item hide-asterisk field="Account" validate-trigger="blur" asterisk-position="end">
					<a-input v-model="Form.Account" placeholder="输入账号" allow-clear>
						<template #prefix>
							<icon-user />
						</template>
					</a-input>
				</a-form-item>
				<a-form-item hide-asterisk field="Password" validate-trigger="blur" asterisk-position="end">
					<a-input-password  v-model="Form.Password" placeholder="输入密码"
						:defaultVisibility="true" allow-clear>
						<template #prefix>
							<icon-lock />
						</template>
					</a-input-password>
				</a-form-item>
				<a-form-item style="margin-bottom: 10px;">
					<a-button type="primary" :loading="loading"  long
						html-type="submit">登陆</a-button>
				</a-form-item>
				<a-form-item >
					<a-button type="text" style="color: var(--color-text-3) !important;" long @click="ToSign" >注册</a-button>
				</a-form-item>
			</a-form>
		</view>
	</a-watermark>
</template>

<script setup>
	import {
		reactive,
		toRefs
	} from 'vue';


	const LoginForm = reactive({
		Form: {
			Account: '',
			Password: '',
		},
		Rules: {
			Account: [{
				required: true,
				message: '请输入账号',
				trigger: 'blur'
			}],
			Password: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			}]
		}
	})


	const {
		Form,
		Rules
	} = toRefs(LoginForm);
	
	const Login = ({
		errors
	}) => {
		
		console.info(errors)
		
		
	}
	
	const ToSign = () => {
		uni.navigateTo({
			url: '/pages/Sign'
		})
	}
</script>

<style scoped lang="scss">
	.watermark {
		background: var(--color-bg-2);
	}

	.login-page {
		width: 80vw;
		padding-top: 100px;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>